<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            height: 80px;
            background-color: #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 900;
            font-size: 20px;
            color: red;
        }

        h1 {

            text-align: center;

        }
    </style>
</head>
<body>
<h1>随机点名</h1>
<div class="box"></div>
<button class="go">开始</button>
<button class="stop">结束</button>
<script>
    //获取元素以及声明数组和定时器的id
    const div = document.querySelector("div")
    const goButton = document.querySelector(".go")
    const stopButton = document.querySelector(".stop")
    const names = ["马云", "马化腾", "马斯克", "马宝国", "许家印", "王健林", "陶品奇", "乔布斯", "习近平", "毛泽东", "雷军", "刘强东", "宋江", "卢俊义", "吴用", "公孙胜", "关胜"]
    let random
    let timeId = null

    //产生随机数的函数
    function getRandom(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
    }

    //默认显示第一个名字
    div.innerHTML = names[0]

    //开始按钮的事件处理
    goButton.addEventListener("click", function () {
        clearInterval(timeId)
        timeId = setInterval(() => {
            random = getRandom(0, names.length - 1)
            div.innerHTML = names[random]
        }, 10)
        if (names.length === 1) {
            stopButton.disabled = true
            goButton.disabled = true
        }
    })

    //结束按钮的事件处理
    stopButton.addEventListener("click", function () {
        clearInterval(timeId)
        names.splice(random, 1)
    })
</script>
</body>
</html>